<template>
	<view>
		<view @tap.stop="open">
			<slot></slot>
		</view>
		<view class="dateBT-shade flex flex-column justify-end" v-if="show" :style="{zIndex:zIndex, width:width}">
			<view class="container" :style="{'padding-bottom': safeAreaBottom+'px'}">
				<view class="DateTime-header flex justify-between bg-gray">
					<view class="DateTime-header-btn" @tap="close">
						<text class="" :style="{color:cancelTColor}">{{cancelText}}</text>
					</view>
					<view class="DateTime-header-btn" @tap="confirm">
						<text class="" :style="{textAlign:'right', color:confirmColor}">{{confirmText}}</text>
					</view>
				</view>
				<picker-view :indicator-style="indicatorStyle" class="DateTime-main" :value="defaultVal" :immediate-change="false" @change="change" :style="{height:height, width:width}">
					<picker-view-column>
						<view class="DateTime-item" :style="indicatorStyle" v-for="(item, index) in sDate[0]"
							:key="index">
							<text class="DateTime-item block-text" :style="indicatorStyle">{{item}}{{units[0]}}</text>
						</view>
					</picker-view-column>
					<picker-view-column>
						<view class="DateTime-item" :style="indicatorStyle" v-for="(item, index) in sDate[1]"
							:key="index">
							<text class="DateTime-item block-text" :style="indicatorStyle">{{item}}{{units[1]}}</text>
						</view>
					</picker-view-column>
					<picker-view-column>
						<view class="DateTime-item" :style="indicatorStyle" v-for="(item, index) in sDate[2]"
							:key="index">
							<text class="DateTime-item block-text" :style="indicatorStyle">{{item}}{{units[2]}}</text>
						</view>
					</picker-view-column>
					<picker-view-column v-if="isTime">
						<view class="DateTime-item" :style="indicatorStyle" v-for="(item, index) in sDate[3]"
							:key="index">
							<text class="DateTime-item block-text" :style="indicatorStyle">{{item}}{{units[3]}}</text>
						</view>
					</picker-view-column>
					<picker-view-column v-if="isTime && isMinute">
						<view class="DateTime-item" :style="indicatorStyle" v-for="(item, index) in sDate[4]"
							:key="index">
							<text class="DateTime-item block-text" :style="indicatorStyle">{{item}}{{units[4]}}</text>
						</view>
					</picker-view-column>
					<picker-view-column v-if="isTime && isMinute && isSecond">
						<view class="DateTime-item" :style="indicatorStyle" v-for="(item, index) in sDate[5]"
							:key="index">
							<text class="DateTime-item block-text" :style="indicatorStyle">{{item}}{{units[5]}}</text>
						</view>
					</picker-view-column>
				</picker-view>
			</view>
		</view>
	</view>
</template>
<script>
	import { mapState } from 'vuex'
	export default {
		name: "datetime",
		props: {
			cancelText: {
				type: String,
				default: '取消'
			},
			cancelTColor: {
				type: String,
				default: '#888888'
			},
			confirmText: {
				type: String,
				default: '确定'
			},
			confirmColor: {
				type: String,
				default: '#0052D9'
			},
			value: {
				type: String,
				default: ''
			},
			isTime: {
				type: Boolean,
				default: true
			},
			isMinute: {
				type: Boolean,
				default: true
			},
			isSecond: {
				type: Boolean,
				default: true
			},
			startYear: {
				type: Number,
				default: 1980
			},
			endYear: {
				type: Number,
				default: 2050
			},
			units: {
				type: Array,
				default: function() {
					return new Array('年', '月', '日', '时', '分', '秒')
				}
			},
			height: {
				type: String,
				default: '360rpx'
			},
			zIndex: {
				type: Number,
				default: 90
			},
			width: {
				type: String,
				default: '750rpx'
			},
			indicatorStyle: {
				type: String,
				default: 'height:50px; line-height:50px;'
			}
		},
		data() {
			return {
				show: false,
				defaultVal: [0, 0, 0, 0, 0, 0],
				sDate: [
					[],
					[],
					[],
					[],
					[],
					[]
				],
				timer: null,
				show: false
			}
		},
		created() {
			this.init();
		},
		computed: {
			...mapState('common', ['safeAreaBottom'])
		},
		methods: {
			stopfun: function(e) {
				e.stopPropagation();
				return;
			},
			now: function() {
				var date = new Date();
				var y = date.getFullYear();
				var m = date.getMonth() + 1;
				m = m < 10 ? ('0' + m) : m;
				var d = date.getDate();
				d = d < 10 ? ('0' + d) : d;
				var h = date.getHours();
				h = h < 10 ? ('0' + h) : h;
				var minute = date.getMinutes();
				var second = date.getSeconds();
				minute = minute < 10 ? ('0' + minute) : minute;
				second = second < 10 ? ('0' + second) : second;
				return y + '-' + m + '-' + d + ' ' + h + ':' + minute + ':' + second;
			},
			arrayIndexOf: function(arr, needFind) {
				var index = -1;
				for (let i = 0; i < arr.length; i++) {
					if (arr[i] == needFind) {
						index = i;
						return i;
					}
				}
				return index;
			},
			setValue: function(val) {
				if (val == '') {
					val = this.now();
				}
				var reg = /^([0-9]{4})-([0-9]{2})-([0-9]{2}) ([0-9]{2}):([0-9]{2}):([0-9]{2})$/;
				var res = val.match(reg);
				if (res == null) {
					reg = /^([0-9]{4})-([0-9]{2})-([0-9]{2})$/;
					res = val.match(reg);
					if (res == null) {
						this.setValue(this.now());
						return;
					}
					res[4] = '00';
					res[5] = '00';
					res[6] = '00';
				}
				this.setDefaults([res[1], res[2], res[3], res[4], res[5], res[6]]);
			},
			setDefaults: function(res) {
				for (let i = 0; i < res.length; i++) {
					var index = this.arrayIndexOf(this.sDate[i], res[i]);
					if (index == -1) {
						index = 0;
					}
					this.defaultVal.splice(i, 1, index);
				}
				this.changeBase(this.defaultVal);
			},
			// 初始化组件
			init: function() {
				if (this.endYear < this.startYear) {
					this.endYear = this.startYear + 10;
				}
				var years = new Array();
				for (let i = this.startYear; i <= this.endYear; i++) {
					years.push(i);
				}
				var months = new Array();
				for (let i = 1; i <= 12; i++) {
					if (i < 10) {
						months.push('0' + i);
					} else {
						months.push(i);
					}
				}
				var days = new Array();
				for (let i = 1; i <= 31; i++) {
					if (i < 10) {
						days.push('0' + i);
					} else {
						days.push(i);
					}
				}
				var hours = new Array();
				for (let i = 0; i < 24; i++) {
					if (i < 10) {
						hours.push('0' + i);
					} else {
						hours.push(i);
					}
				}
				var minutes = new Array();
				var seconds = new Array();
				for (let i = 0; i < 60; i++) {
					if (i < 10) {
						minutes.push('0' + i);
						seconds.push('0' + i);
					} else {
						minutes.push(i);
						seconds.push(i);
					}
				}
				this.sDate = [years, months, days, hours, minutes, seconds];
				this.$nextTick(() => {
					setTimeout(() => {
						this.setValue(this.value);
					}, 500);
				});
			},
			change: function(res) {
				if (this.timer != null) {
					clearTimeout(this.timer);
				}
				console.log('res.detail.value', res.detail.value);
				this.timer = setTimeout(() => {
					this.changeBase(res.detail.value);
				}, 100);
			},
			changeBase: function(res) {
				var date = new Date(this.sDate[0][res[0]], this.sDate[1][res[1]], 0);
				var days = date.getDate();
				var daysOut = new Array();
				for (let i = 1; i <= days; i++) {
					if (i < 10) {
						daysOut.push('0' + i);
					} else {
						daysOut.push(i);
					}
				}
				this.sDate.splice(2, 1, daysOut);
				if (res[2] + 1 > days) {
					res[2] = days - 1;
				}
				this.defaultVal = res;
				if (this.isTime) {
					var resdata = new Array(this.sDate[0][this.defaultVal[0]],
						this.sDate[1][this.defaultVal[1]],
						this.sDate[2][this.defaultVal[2]],
						this.sDate[3][this.defaultVal[3]],
						this.sDate[4][this.defaultVal[4]],
						this.sDate[5][this.defaultVal[5]]);
				} else {
					var resdata = new Array(
						this.sDate[0][this.defaultVal[0]],
						this.sDate[1][this.defaultVal[1]],
						this.sDate[2][this.defaultVal[2]]
					)
				}
				this.$emit('change', resdata);
			},
			confirm: function() {
				if (this.isTime) {
					var res = new Array(this.sDate[0][this.defaultVal[0]],
						this.sDate[1][this.defaultVal[1]],
						this.sDate[2][this.defaultVal[2]],
						this.sDate[3][this.defaultVal[3]],
						this.sDate[4][this.defaultVal[4]],
						this.sDate[5][this.defaultVal[5]]);
				} else {
					var res = new Array(this.sDate[0][this.defaultVal[0]],
						this.sDate[1][this.defaultVal[1]],
						this.sDate[2][this.defaultVal[2]])
				}
				this.$emit('confirm', res);
				this.close();
			},
			open: function() {
				this.show = true;
			},
			close: function() {
				this.show = false;
			}
		}
	}
</script>
<style scoped>
	.dateBT-shade {
		position: fixed;
		left: 0;
		top: 0;
		bottom: 0;
		width: 100%;
		z-index: 99999;
		overflow: hidden;
		
		background-color: rgba(0, 0, 0, 0.5);
	}
	
	.container{
		box-sizing: border-box;
		background-color: #FFFFFF;
	}
	
	.DateTime-header{
		border-bottom: 1rpx solid #eee;
	}

	.DateTime-header-btn {
		height: 38rpx;
		font-size: 32rpx;
		line-height: 38rpx;
		padding: 24rpx;
	}

	.DateTime-main {
		width: 750rpx;
		color: #232323;
	}

	.DateTime-item {
		height: 50px;
		font-size: 32rpx;
		line-height: 50px;
		overflow: hidden;
		text-align: center;
	}

	/* #ifndef APP-NVUE */
	.DateTime-item {
		display: block;
		width: 100%;
	}

	/* #endif */
</style>